import React, {useState} from 'react';
import {Form, Input, Button, message,Typography} from 'antd';
import http from "../services/http";
import styles from '../pages/styles/login.module.css'
import {useRouter} from 'next/router';
import { UsbTwoTone, SmileTwoTone } from '@ant-design/icons';
const LoginPage = () => {
    const { Title } = Typography;
    const [loading, setLoading] = useState(false);
    const router = useRouter();
    const [loginForm] = Form.useForm();
    const onFinish = async (values) => {
        console.log('Received values of form: ', values);
        setLoading(true);
        try {
            const res = await http.post('/login', values);
            if (res.data) {
                localStorage.setItem('token', res.data)

                http.get('/user/me').then((res)=>{

                    if(res.data){
                        const userInfo=JSON.stringify(res.data)
                        localStorage.setItem('userInfo',userInfo)
                    }
                }).catch()

                // 处理响应
                resetForm();
                message.success('登录成功！');

                await router.push('/')
            } else {
                resetForm();
                message.error('登录失败：' + res);
            }

            setLoading(false);
            // 跳转到主页或其他页面
        } catch (error) {
            resetForm();
            message.error('登录失败：' + error);
            setLoading(false);
        }
    };

    const resetForm = () => {
        loginForm.username = ''
        loginForm.password = ''
    }

    return (
        <div className={styles.box}>
            <Title level={2}>欢迎来到 IT 服务社区</Title>
            <Form
                form={loginForm}
                className={styles.formBox}
                name="login_Form"
                initialValues={{remember: true}}
                onFinish={onFinish}
                style={{maxWidth: 300, margin: '20px auto'}}
            >
                <Form.Item
                    name="username"
                    rules={[{required: true, message: '请输入您的用户名!'}]}
                >
                    <Input placeholder="用户名"
                           prefix={
                               <SmileTwoTone
                                   style={{
                                       color: 'rgba(0,0,0,.25)',
                                   }}
                               />
                           }
                           maxLength="15"
                           showCount
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{required: true, message: '请输入您的密码!'}]}
                >
                    <Input.Password placeholder="密码"
                                    prefix={
                                        <UsbTwoTone
                                            style={{
                                                color: 'rgba(0,0,0,.25)',
                                            }}
                                        />
                                    }
                    />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" loading={loading} block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>

    );
};

export default LoginPage;
